@charset "utf-8";
/**
 * Kalaisoo
 *
 * A lightweight no-framework framework written in PHP
 *
 * @package Kalaisoo
 * @author $Author: info@sah-company.com $
 */
section.blog {
	margin-top: 3em;
	margin-bottom: 3em;
}

article.item header {
	padding: 0;
	margin: 1em 0;
	text-align: center;
	color: gray;
}

article.item section p:first-child {
	margin-top: 0;
}

article.item header h1 {
	display: none;
}

article.item header p.location {
	position: absolute;
	top: -48px;
	right: 0;
}

article.item header p {
	font-size: 0.7em;
}

article.item footer {
	padding: 0;
}

article.item header span.date,
article.item header span.hour {
	display: none;
}

article.item.auto header p.location {
	display: none;
}

article.item:first-child header span.date,
article.item:first-child header span.hour,
article.item:nth-child(12n+0) header span.date,
article.item:nth-child(6n+0) header span.hour {
	display: inline-block;
}

article.item a.avatar {
	float: right;
	margin-top: -48px;
	margin-right: 54px;
}

article.item a.avatar:hover {
	background-color: inherit;
	color: inherit;
}

article.item a.avatar img {
	border: 0;
}

article.item div.bubble {
}

form#blog {
	position: relative;
	padding: 0;
	margin: 1em 64px 3em 64px;
}

form#blog fieldset {
	margin: 0;
	margin-bottom: 1em;
	padding: 0;
}

form#blog div.row {
	margin: 0;
}

form#blog textarea {
	width: 99%;
	border: none;
}

form#blog textarea[required="required"] {
	font-weight: normal;
}

form#blog input.default {
	float: left;
}

/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
	position:relative;
	padding:15px;
	margin:1em 64px 3em 64px;
	border:5px solid #00a7ed;
	color:#333;
	background:#fff;
	/* css3 */
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
	margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
	margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
	content:"";
	position:absolute;
	bottom:-20px; /* value = - border-top-width - border-bottom-width */
	left:40px; /* controls horizontal position */
    border-width:20px 20px 0;
	border-style:solid;
    border-color:#00a7ed transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
	content:"";
	position:absolute;
	bottom:-13px; /* value = - border-top-width - border-bottom-width */
	left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
	border-width:13px 13px 0;
	border-style:solid;
	border-color:#fff transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
	top:-20px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:40px; /* controls horizontal position */
    border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
	top:-13px; /* value = - border-top-width - border-bottom-width */
	bottom:auto;
	left:auto;
	right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
    border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
	top:10px; /* controls vertical position */
	bottom:auto;
	left:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 30px 15px 0;
	border-color:transparent #00a7ed;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	bottom:auto;
	left:-21px; /* value = - border-left-width - border-right-width */
	border-width:9px 21px 9px 0;
	border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
	top:10px; /* controls vertical position */
	bottom:auto;
    left:auto;
	right:-30px; /* value = - border-left-width - border-right-width */
	border-width:15px 0 15px 30px;
	border-color:transparent #00a7ed;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
	top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
	bottom:auto;
    left:auto;
	right:-21px; /* value = - border-left-width - border-right-width */
	border-width:9px 0 9px 21px;
	border-color:transparent #fff;
}

/**
 * blog
 */
div.auto {
	font-size: 0.66em;
}

div.auto a.label {
	padding: 0.33em 0.5em 0.33em 0.5em;
	background-color: #00a7ed;
	color: white;
	-webkit-border-radius: 0.5em 0 0 0.5em;
	-moz-border-radius: 0.5em 0 0 0.5em;
}

div.auto a.view, span.deleted {
	display: inline-block;
	padding: 0.33em 0.5em 0.33em 0.5em;
	background-color: gray;
	color: white;
	-webkit-border-radius: 0 0.5em 0.5em 0;
	-moz-border-radius: 0 0.5em 0.5em 0;
	max-width: 23.3em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-left: -0.33em;
}

span.deleted {
	background-color: red;
	color: white;
}

/* special colors for certain domains */
div.auto a.label.project { background-color: orange; }